<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  /* 做的不好，有待改进，请各位多提意见 */
  /* 特别是填补左右两半之间的缝隙做法 */

    html {
		height: 100%;
		box-sizing: border-box;
	}
	
	*, *:before, *:after {
		box-sizing: inherit;
	}
    body { 
      display:table; 
      text-align:center; 
      background: #bbb;
      height: 100%; 
      width:100%;
    }
    .block {
      /*实现垂直居中,需要父元素为display: table;*/
      display: table-cell;
      vertical-align: middle;
    }

    .circle {
      position: relative;
      display:inline-block;
      background-color: #fff;
      height: 80px;
      width: 80px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow:  0 0 10px rgba(36, 35, 35, 0.548), 0 0 10px rgba(36, 35, 35, 0.548) inset;
    }

    .content {
      position: absolute;
      top: 15%;
      left: 15%;

      /*配合子项，实现垂直居中*/
      display: table;

      background-color: #bbb;
      height: 70%;
      width: 70%;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(36, 35, 35, 0.548), 0 0 10px rgba(36, 35, 35, 0.548) inset;
    }
    .content>span {      
      /*实现垂直居中,需要父元素为display: table;*/
      display: table-cell;
      vertical-align: middle;

      font-size: 130%;
      font-weight: bolder;
      color: #fff;
      text-shadow: 0 0 10px rgba(36, 35, 35, 0.548);
    }

    .circle>span{
      position: absolute;

      /*宽高加大，填补左右两半之间的缝隙*/
      height: 110%;
      width: 52%;

      overflow: hidden;
    }

    .left {
      
      /* 
      top: 0;
      left: 0; 
      */
      /*宽高加大，需要调整位置*/
      top: -5%;
      left: -1%;
    }
    .right {
      top:-5%;
      left:50%;
    }

    .process {
      position: absolute;
      display:inline-block;
      background: rosybrown;    
      height: 100%;
      width: 100%;
    }

    @keyframes process-rotate-right{
      0%{transform:rotate(0deg)}
      25%{transform:rotate(45deg)}
      50%{transform:rotate(90deg)}
      75%{transform:rotate(135deg)}
      100%{transform:rotate(180deg)}
    }
    
    @keyframes process-rotate-left{
      0%{transform:rotate(0deg)}
      50%{transform:rotate(35deg)}
      100%{transform:rotate(70deg)}
    }


    .left>.process {
      top:0;
      left:100%;

      /* 右半圆 */
      border-radius: 0 999px 999px 0;      
	  
      transform-origin: 0px 50%;     

	  /* 动画 注意，是有下面设置是有前后顺序的 */
      animation: process-rotate-left 0.6s;  
      animation-delay: 1.5s; /*延时*/
      animation-timing-function: linear;   /*速度曲线 linear:从头到尾都是相同的速度*/
	    animation-fill-mode : forwards  /* 设置对象状态为动画结束时的状态 */
    }

    .right>.process {
      top:0;
      left:-100%;

      /* 左半圆 */
      border-radius: 999px 0 0 999px;
	  
      transform-origin: 100% 50%;       
	  
	  /* 动画 注意，是有下面设置是有前后顺序的 */
      animation: process-rotate-right 1.5s; 
      animation-timing-function: linear;  /*速度曲线 linear:从头到尾都是相同的速度*/
	    animation-fill-mode : forwards  /* 设置对象状态为动画结束时的状态 */
    }

    .demo {
      margin-top: 20px;
    }
    .left-process-demo {
      display:inline-block;
      background: rosybrown;      
      height: 80px;
      width: 40px;
      border-radius: 0 999px 999px 0;
    }

    
    .right-process-demo {
      display:inline-block;
      background: rosybrown;      
      height: 80px;
      width: 40px;
      border-radius: 999px 0  0 999px;
    }
  </style>
</head>
<body>
  <div class="block">
    <span class="circle">
      <span class="left"><span class="process"></span></span>
      <span class="right"><span class="process"></span></span>
      <div class="content"> <span>70%</span> </div>
    </span>

    <div class="demo">      
      <span class="left-process-demo"></span>
      <span class="right-process-demo"></span>
    </div>
  </div>
</body>
</html>